<template>
  <div class="index_dianying">
    <div class="haopin">
      <h1 class="title">近期最受期待</h1>
      <van-swipe
        class="my-swipe"
        indicator-color="white"
        :loop="false"
        :width="80"
        :show-indicators="false"
        :stop-propagation="false"
      >
        <van-swipe-item v-for="(ele,index) in MovieList" :key="index" @click="MovieDetail(ele.id)">
          <div class="haopin-item">
            <div class="haopin-img">
              <img :src="ele.img" alt />
              <div class="msk">{{ele.wish}}人想看</div>
            </div>
            <h5>{{ele.nm.length>6?ele.nm.slice(0,5)+'...':ele.nm}}</h5>
          </div>
        </van-swipe-item>
        <van-swipe-item></van-swipe-item>
        <van-swipe-item></van-swipe-item>
      </van-swipe>
    </div>

    <div class="hot-list" :id="movieID" ref="hotlist">
      <van-list v-model="loading" error-text="请求失败，点击重新加载" @load="onLoad">
        <DaiyingItem v-for="(item,i) in datalist" :key="i" :e="item"></DaiyingItem>
      </van-list>
    </div>
  </div>
</template>
<script>
import DaiyingItem from "../components/DaiyingItem.vue";

export default {
  name: "index_dianying",
  data() {
    return {
      CityId: 1,
      MovieList: [],
      movieID: [],
      datalist: [],
      loading: false,
      finished: false,
      limit: 10,
      offset: 0
    };
  },
  components: {
    DaiyingItem
  },
  created() {
    if (localStorage.getItem("historyCity")) {
      this.CityId = JSON.parse(localStorage.getItem("historyCity")).cityid;
    }
    this.GetmostExpected();
  },
  methods: {
    MovieDetail(MovieId) {
      this.$router.push({ name: "Detail", params: { MovieId } });
    },
    GetmostExpected() {
      this.axios({
        method: "get",
        url: "index/mostExpected",
        params: {
          ci: this.CityId,
          limit: 30,
          offset: 0
        }
      })
        .then(result => {
          this.MovieList = result.data.coming;
        })
        .catch(err => {
          console.log("err", err);
        });
    },
    onLoad() {
      this.axios({
        url: "index/mostExpected",
        method: "get",
        params: {
          ci: this.CityId,
          limit: this.limit,
          offset: this.offset
        }
      }).then(e => {
        this.datalist.push(...e.data.coming);
        this.loading = false;
        this.offset++;
      });
    }
  }
};
</script>
<style lang="less" scoped>
.haopin {
  padding: 15px 4px 15px 0px;
  background-color: #fff;
  width: 100%;
  .title {
    font-size: 14px;
    color: #333;
    margin: 10px 6px;
    font-weight: 300;
  }
}
.van-swipe-item {
  padding: 0 6px;
  .haopin-img {
    width: 100%;
    position: relative;
    img {
      width: 100%;
      height: 130px;
    }
    .msk {
      position: absolute;
      left: 4px;
      bottom: 2px;
      color: #faaf00;
      font-size: 11px;
      font-weight: 600;
    }
  }
  h5 {
    font-size: 10px;
    color: #222;
    margin: 0 0 1px;
  }
}
.list-wrap {
  width: 100%;
  background-color: #fff;
  margin-top: 10px;
  margin-bottom: 60px;
}
</style>